<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/initialization.css" />
	<style type="text/css">
		body {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
		}
		
		li {
			display: inline-block;
			width: 40px;
			height: 40px;
			border-radius: 100%;
			background-color: rgba(0, 0, 0, .3);
			text-align: center;
			line-height: 40px;
			margin: 0 10px;
		}
		/* .one>a{    子类选择器
			color: red;
		} */
		
		/* 兄弟选择器 */
		 li + li{
			color: #fff;
			background-color: #0078FF;
		}
	</style>
	<body>
		<ul>
			<li class="one"><a href="javaspript:;">1</a></li>
			<li><a href="javaspript:;">2</a></li>
			<li><a href="javaspript:;">3</a></li>
			<li><a href="javaspript:;">4</a></li>
			<li><a href="javaspript:;">5</a></li>
		</ul>
	</body>
</html>
